﻿@{
    ViewData["Title"] = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>餐饮列表分页</h1>

@*显示*@
<table class="layui-table" id="demoTable" lay-filter="demoTable">
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
<div id="demo-laypage-all"></div>

@* 商户弹出层 *@
<div id="roomTypeAdd" style="display:none">
    <form class="layui-form">
        <div class="layui-form-item" style="display:none">

            <label class="layui-form-label"><span style="color:red">*</span>餐饮id</label>
            <div class="layui-input-block">
                <input type="text" name="DishesId" id="DishesId" placeholder="餐饮id">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="DishesName" id="DishesName" lay-verify="required" placeholder="" lay-reqtext="名称" autocomplete="off" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-btn-container">

                <button type="button" class="layui-btn layui-btn-normal" id="DishesPic">选择文件</button>
                <button type="button" class="layui-btn" id="DishesPic">开始上传</button>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">菜品介绍</label>
            <div class="layui-input-block">
                <textarea name="DishesDes" id="DishesDes" lay-verify="required" placeholder="介绍" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价钱</label>
            <div class="layui-input-block">
                <input type="text" name="DishesPrice" id="DishesPrice" lay-verify="required" placeholder="" lay-reqtext="价钱" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" name="StockCount" id="StockCount" lay-verify="required" placeholder="" lay-reqtext="库存" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">口味</label>
            <div class="layui-input-block">
                <input type="text" name="TasteName" id="TasteName" lay-verify="required" placeholder="" lay-reqtext="口味" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分组</label>
            <div class="layui-input-block">
                <input type="text" name="DishesGroupId" id="DishesGroupId" lay-verify="required" placeholder="" lay-reqtext="分组" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">规格</label>
            <div class="layui-input-block">
                <input type="text" name="DishesSpecsId" id="DishesSpecsId" lay-verify="required" placeholder="" lay-reqtext="规格" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button id="adds" class="layui-btn" lay-submit lay-filter="submitForm">确认</button>
                <button id="edit" class="layui-btn" lay-submit lay-filter="xiuForm">修改</button>
            </div>
        </div>

    </form>
</div>

<html>
<body>
    <script>

        function GetSelectedIds() {
            var checkstatus = layui.table.checkstatus('demoTable');
            if (checkstatus.data.length > 0) {
                var idsArray = [];
                for (var i = 0; i < checkstatus.data.length; i++) {
                    idsArray.push(checkstatus.data[i].DishesId);
                }
                var ids = idsArray.toString();
                aler(ids);
            }
            else {

                alert("请至少选着一个");
            }
        }

        layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element', 'util', 'laydate'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var laypage = layui.laypage;
            var element = layui.element;
            var util = layui.util;
            var laydate = layui.laydate;
            $(function () {

                Show();
            })

            var from = {
                "dishesName": "",
                "index": 1,
                "pagesize": 10
            }
            var total = 0;
            function Show() {

                $.ajax({
                    url: 'http://localhost:5174/api/Catering/DishesShow',
                    type: 'post',
                    data: JSON.stringify(from),
                    contentType: 'application/json',
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    async: false,
                    success: res => {
                        total = res.data.total;
                        console.log(res.data.data);
                        table.render({
                            elem: '#demoTable',
                            data: res.data.data,
                            cols: [[
                                { field: 'ck', type: 'checkbox', },
                                { field: 'dishesId', title: 'ID', width: 80 },
                                { field: 'dishesName', title: '名称', width: 120 },
                                { field: 'dishesPrice', title: '价格', width: 100 },
                                { field: 'stockCount', title: '库存', width: 100 },
                                {
                                    field: 'dishesPic',  // 图片对应的字段名
                                    title: '图片',
                                    templet: function (d) {
                                        if (d.dishesPic) {
                                            // 假设图片路径存储在数据的 imageField 字段中
                                            return '<img src="' + d.dishesPic + '" width="100px" height="150px" />';
                                        } else {
                                            // 如果没有图片路径，可返回默认图片或其他提示信息
                                            return '<img src="OIP-C(20).jpg" width="100px" height="150px" />';
                                        }
                                    }
                                },
                                
                            ]]
                        });
                    },
                    error: function (error) {
                        console.log(error);
                    }

                });
            }


            laypage.render({
                elem: 'demo-laypage-all', // 元素 id
                count: 4, // 数据总数
                limit: from.pageSize,
                limits: [3, 4, 5, 6],
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                first: '首页',
                last: '尾页',
                prev: '<em>←</em>',
                next: '<em>→</em>',
                //页面跳转时
                jump: function (obj, first) {
                    //非首次加载时调用
                    if (!first) {
                        from.index = obj.curr;
                        from.pagesize = obj.limit;
                        Show();
                    }
                }
            });


         

            form.on('submit(submitForm)', function (data) {
                data.elem.disabled = true;
                $.ajax({
                    url: 'url:http://localhost:5174/api/Catering/AddDishes',
                    type: 'post',
                    data: JSON.stringify(data.field),
                    contentType: 'application/json;',
                    success: function (res) {
                        if (res.code > 0) {
                            layer.msg("添加成功");
                            Show();
                        }
                    }
                });
                return false;
            });



            $(".layui-btn").click(function () {

                var id = $(this).attr('id');
                if (id === "add") {
                    $("#edit").hide();
                    $("#adds").show();
                    var index = layer.open({
                        type: 1,
                        area: ['630px', '360px'],
                        shade: false, // 不显示遮罩
                        content: $('#roomTypeAdd'), // 捕获的元素
                        end: function () {
                            Show();
                        }
                    });
                }
            });

            table.on('tool()', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                console.log(data);
                $.Ajax({
                    url: 'url:http://localhost:5174/api/Catering/GetDishes',
                    type: 'post',
                    data: { Id: data.DishesId },
                    success: function (data) {
                        document.getElementById("DishesId").value = data.DishesId;
                        document.getElementById("DishesName").value = data.DishesName;
                        document.getElementById("DishesPic").value = data.DishesPic;
                        document.getElementById("DishesDes").value = data.DishesDes;
                        document.getElementById("DishesPrice").value = data.DishesPrice;
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }


                });



                form.on('submit(xiuForm)', function (data) {
                    console.log(JSON.stringify(data.field))
                    $.ajax({
                        url: 'url:http://localhost:5174/api/Catering/UpdateDishes',
                        type: 'post',
                        data: JSON.stringify(data.field),
                        contentType: 'application/json;',
                        success: function (res) {
                            if (res.code > 0) {
                                layer.msg("修改成功");
                                var index = layer.getFrameIndex('index'); // 获取弹出层的索引
                                layer.close(index);
                            }
                        }
                    });
                    return false;
                });
                if (obj.event === "yourFunction") {
                    $ * ('#edit').show();
                    $ * ('#adds').hide();
                    layer.open({
                        title: '编辑 - id:' + data.shopId,
                        type: 1,
                        shade: false, // 不显示遮罩
                        area: ['80%', '80%'],
                        content: $('#roomTypeAdd'),
                        end: function () {
                        }
                    });

                    console.log('编辑按钮被点击，行数据为:', data);
                }
                else if (layEvent === "deleteNumber") {
                    layer.confirm('确定删除吗？', function (index) {
                        var myArray = [];
                        myarray.push(data.DishesId);
                        $.ajax({
                            url: 'url:http://localhost:5174/api/Catering/DeleteDishes',
                            type: 'post',
                            data: JSON.stringify(myArray),
                            contentType: 'application/json;',
                            headers: {
                                "Authorization": "Bearer " + localStorage.getItem('token')
                            },
                            success: function (res) {
                                if (res.code > 0) {
                                    layer.msg("删除成功");
                                    Show();
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

        });
    </script>


</body>
</html>

